<script type="text/ecmascript-6">
import { toRem } from '@/common/rem.js'
export default {
  name: 'Icon',
  props: {
    size: {
      type: Number,
      default: 16,
    },
    type: {
      type: String,
      required: true,
    },
    mvId: {
      type: Number,
      default: 0,
    },
    color: {
      type: String,
      default: '',
    },
    backdrop: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    // 获取样式
    getIconCls() {
      let cls = `icon-${this.type}`
      if (this.color) {
        cls += ` icon-color-${this.color}`
      }
      return cls
    },
    // 向父类传递点击事件
    onClick(e) {
      if (this.type == 'mv') {
        e.stopPropagation()
        this.$router.push(`/mv/${this.mvId}`)
      } else {
        this.$emit('click', e)
      }
    },
    // 获取fontSize
    getIconStyle() {
      const chromeMinSize = 12
      // 支持小于12px
      const retStyle = { fontSize: toRem(this.size) }
      if (this.size < chromeMinSize) {
        const ratio = this.size / chromeMinSize
        // scale() 该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。
        retStyle.transform = `scale(${ratio})`
      }
      return retStyle
    },
  },
  render() {
    // i 标签
    const Icon = <i onClick={this.onClick} class={`iconfont icon-component ${this.getIconCls()}`} style={this.getIconStyle()} />
    // i标签外层套span标签
    if (this.backdrop) {
      // span标签和i标签比例 1.56 ： 1
      const backDropSizeRatio = 1.56
      const backDropSize = toRem(backDropSizeRatio * this.size)
      return (
        <span style={{ width: backDropSize, height: backDropSize }} class="backdrop">
          {Icon}
        </span>
      )
    }
    return Icon
  },
}
</script>

<style lang="scss" scoped>
.backdrop {
  display: inline-block;
  @include flex-center;
  border-radius: 50%;

  &:hover {
    background: var(--round-hover-bgcolor);
  }
}

.icon-component {
  cursor: pointer;
}

.icon-color {
  // 通过prop传入这几个字段
  // 可以使用默认的几个颜色
  &-theme {
    color: $theme-color;
  }
  &-white {
    color: $white;
  }
  &-shallow {
    color: var(--font-color-shallow-grey);
  }
}
</style>
